<template>
  <a-collapse-panel>
    <template #header>基础设置</template>
    <a-form-item :name="['chart', 'chartType']" label="图表类型">
      <jnpf-select v-model:value="chart.chartType" :options="chartTypeOptions" @change="onChartTypeChange" />
    </a-form-item>
    <a-form-item v-if="chart.chartType === 'line'" :name="['chart', 'line', 'smooth']" label="平滑曲线">
      <a-switch v-model:checked="chart.line.smooth" />
    </a-form-item>
    <a-form-item v-if="chart.chartType === 'pie'" :name="['chart', 'pie', 'roseType']" label="南丁格尔图">
      <a-switch v-model:checked="chart.pie.roseType" />
    </a-form-item>
    <a-form-item v-if="chart.chartType === 'bar'" :name="['chart', 'xAxis', 'axisTick', 'alignWithLabel']" label="刻度对齐">
      <a-switch v-model:checked="chart.xAxis.axisTick.alignWithLabel" />
    </a-form-item>
  </a-collapse-panel>
</template>

<script setup lang="ts">
  defineProps(['chart', 'dataSetList']);

  const emit = defineEmits(['updateDefaultChart']);

  const chartTypeOptions = [
    { id: 'bar', fullName: '柱状图' },
    { id: 'line', fullName: '折线图' },
    { id: 'pie', fullName: '饼状图' },
    // { id: 'radar', fullName: '雷达图' },
  ];

  // 设置默认展示数据
  function onChartTypeChange(value) {
    emit('updateDefaultChart', value);
  }
</script>
